<template>
  <div class="container">
    <div class="echarts-title">
      <div>数据量统计</div>
      <img src="@/assets/echarts-title.png" />
    </div>
    <div class="static-container">
      <div class="text01_div">
        <p>商业街区(点)</p>
        <p>76</p>
      </div>
      <div class="text01_div">
        <p>基本道路(线)</p>
        <p class="sky">32</p>
      </div>
      <div class="text01_div">
        <p>周边建筑(面)</p>
        <p class="org">808</p>
      </div>
    </div>
  </div>
  <div class="echarts-container">
    <div class="echarts-title">
      <div>建筑层数统计</div>
      <img src="@/assets/echarts-title.png" />
    </div>
    <div class="echarts-charts" id="myChart2"></div>
  </div>
  <div class="echarts-container">
    <div class="echarts-title">
      <div>商区数量对比</div>
      <img src="@/assets/echarts-title.png" />
    </div>
    <div class="echarts-charts" id="myChart3"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
// import { initTest } from "./methods/test";
import { initBar } from "./methods/bar";
import { initPie } from "./methods/pie";
onMounted(() => {
  let myChart2 = initPie("myChart2");
  let myChart3 = initBar("myChart3");

  window.onresize = () => {
    myChart2 && myChart2.resize();
    myChart3 && myChart3.resize();
  };
});
</script>

<style scoped>
.container {
  height: 18vh;
  width: 100%;
}
.echarts-container {
  height: 36vh;
  width: 100%;
}
.echarts-title {
  position: relative;
  height: 4vh;
}
.echarts-title div {
  color: white;
  font-size: 2vh;
  margin: 0 2vh;
}
.echarts-title img {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.echarts-charts {
  width: 100%;
  height: 32vh;
}
.static-container {
  width: 100%;
  height: 14vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.text01_div {
  margin-left: 5%;
  text-align: center;
}
.text01_div p {
  line-height: 3vh;
}
.text01_div p:nth-child(1) {
  font-size: 1vh;
  color: #ffffff;
}
.text01_div p:nth-child(2) {
  font-size: 3vh;
  color: #ffff43;
  font-weight: 600;
}
.sky {
  color: #25f3e6 !important;
}
.org {
  color: #ff4e4e !important;
}
</style>